<!DOCTYPE html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">

  <title>天猫</title>
  <link rel="stylesheet/less" href="css/index.less" />
  <script src="js/less.min.js"></script>
  <script src="js/vue.js"></script>
</head>

<body>
  <!-- <script type="text/javascript">
   console.log(page1.import.body.innerHTML);
  </script> -->


  <div id="app">

    <div id="page1">
      <iframe align="center" width="100%" height="50" src="nav.html" frameborder="no" border="0" marginwidth="0"
        marginheight="0" scrolling="no"></iframe>
    </div>

    <div id="page2">
      <iframe align="center" width="100%" height="170" src="search.html" frameborder="no" border="0" marginwidth="0"
        marginheight="0" scrolling="no"></iframe>
    </div>


    <div class="categoryWithCarousel">
      <div class="headbar">
        <div class="head ">
          <span class="glyphicon glyphicon-th-list" style="margin-left:10px"></span>
          <span style="margin-left:10px">商品分类</span>
        </div>
        <div class="rightMenu">
          <span @mouseenter="showImg()" @mouseleave="isShowImg()">
            <img src="https://how2j.cn/tmall/img/site/catear.png" ref="spanImg"
              style="position: absolute; top:-20px;left: 270px;z-index: 100;display: none;height: 20px;" />
            <a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/chaoshi.png"></a></span>
          <span><a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/guoji.png"></a></span>
          <span>
            <a href="#nowhere">
              平板电视
            </a></span>
          <span>
            <a href="#nowhere">
              电热水器
            </a></span>
        </div>
      </div>

      <div style="position: relative;">
        <div class="categoryMenu">
          <div class="eachCategory" cid="83" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              平板电视
            </a>
          </div>
          <div class="eachCategory" cid="82" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              马桶
            </a>
          </div>
          <div class="eachCategory" cid="81" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              沙发
            </a>
          </div>
          <div class="eachCategory" cid="80" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              电热水器
            </a>
          </div>
          <div class="eachCategory" cid="79" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              平衡车
            </a>
          </div>
          <div class="eachCategory" cid="78" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              扫地机器人
            </a>
          </div>
          <div class="eachCategory" cid="77" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              原汁机
            </a>
          </div>
          <div class="eachCategory" cid="76" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              冰箱
            </a>
          </div>
          <div class="eachCategory" cid="75" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              空调
            </a>
          </div>
          <div class="eachCategory" cid="74" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              女表
            </a>
          </div>
          <div class="eachCategory" cid="73" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              男表
            </a>
          </div>
          <div class="eachCategory" cid="72" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              男士手拿包
            </a>
          </div>
          <div class="eachCategory" cid="71" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              男士西服
            </a>
          </div>
          <div class="eachCategory" cid="69" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              时尚男鞋
            </a>
          </div>
          <div class="eachCategory" cid="68" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              品牌女装
            </a>
          </div>
          <div class="eachCategory" cid="64" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              太阳镜
            </a>
          </div>
          <div class="eachCategory" cid="60" @mouseenter="show()" @mouseleave="isShow()">
            <span class="glyphicon glyphicon-link"></span>
            <a href="#nowhere">
              安全座椅
            </a>
          </div>
        </div>
      </div>
      <div style="position: relative;left: 0;top: 0;display: none;" ref="leftList" @mouseenter="show()"
        @mouseleave="isShow()">
        <div class="productsAsideCategorys" cid="83">
          <div class="row ">
            <a href="#nowhere">
              屏大影院
            </a>
            <a href="#nowhere">
              周末
            </a>
            <a href="#nowhere">
              新品特惠
            </a>
            <a href="#nowhere">
              32吋电视机
            </a>
            <a href="#nowhere">
              智能网络
            </a>
            <div class="seperator"></div>
          </div>
          <div class="row ">
            <a href="#nowhere">
              USB高清解
            </a>
            <a href="#nowhere">
              芒果TV在线
            </a>
            <a href="#nowhere">
              抢购价
            </a>
            <a href="#nowhere">
              USB解码
            </a>
            <a href="#nowhere">
              32英吋
            </a>
            <a href="#nowhere">
              10核
            </a>
            <a href="#nowhere">
              TCL品牌日
            </a>
            <div class="seperator"></div>
          </div>
          <div class="row ">
            <a href="#nowhere">
              不要赠品
            </a>
            <a href="#nowhere">
              新品上市
            </a>
            <a href="#nowhere">
              4K硬屏
            </a>
            <a href="#nowhere">
              领100元券
            </a>
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
              智能高清
            </a>
            <a href="#nowhere">
              8月，酷暑
            </a>
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
              8月大促
            </a>
            <a href="#nowhere">
              天猫定制
            </a>
            <div class="seperator"></div>
          </div>
          <div class="row ">
            <a href="#nowhere">
              智能操作系统
            </a>
            <a href="#nowhere">
              金色外观
            </a>
            <a href="#nowhere">
              三星屏幕
            </a>
            <a href="#nowhere">
              客厅爆款
            </a>
            <a href="#nowhere">
              八核配置
            </a>
            <a href="#nowhere">
              限时特惠
            </a>
            <div class="seperator"></div>
          </div>
          <div class="row ">
            <a href="#nowhere">
              限时特惠
            </a>
            <a href="#nowhere">
              热销爆款
            </a>
            <a href="#nowhere">
              4K全高清
            </a>
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
              六核智能
            </a>
            <a href="#nowhere">
              14核4K
            </a>
            <a href="#nowhere">
              YUNOS
            </a>
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
              YUNOS
            </a>
            <a href="#nowhere">
              64位处理器
            </a>
            <div class="seperator"></div>
          </div>
          <div class="row ">
            <a href="#nowhere">
              YUNOS
            </a>
            <a href="#nowhere">
              微信电视
            </a>
            <a href="#nowhere">
              4k超清
            </a>
            <a href="#nowhere">
              64位真4K
            </a>
            <a href="#nowhere">
              10核机芯
            </a>
            <a href="#nowhere">
              V字黑釉底座
            </a>
            <a href="#nowhere">
              4K超清
            </a>
            <div class="seperator"></div>
          </div>
          <div class="row ">
            <a href="#nowhere">
              64位14核
            </a>
            <a href="#nowhere">
              海量影视
            </a>
            <a href="#nowhere">
              人气爆款
            </a>
            <a href="#nowhere">
              限时特惠
            </a>
            <a href="#nowhere">
              真4K屏
            </a>
            <a href="#nowhere">
              65吋巨屏
            </a>
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
              4K超清视界
            </a>
            <a href="#nowhere">
              限时特惠
            </a>
            <div class="seperator"></div>
          </div>
          <div class="row ">
            <a href="#nowhere">
              55寸旗舰
            </a>
            <a href="#nowhere">
              4K机皇
            </a>
            <a href="#nowhere">
              曲面机皇
            </a>
            <a href="#nowhere" style="color: rgb(135, 206, 250);">
              轻薄4K
            </a>
            <div class="seperator"></div>
          </div>
        </div>
      </div>
      <div style="height:510"></div>
      <div data-ride="carousel" class="carousel-of-product carousel slide" id="carousel-of-product">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li v-for="(item,index) in imgSrc.length" :key="index" :data-slide-to="index"
            data-target="#carousel-of-product" :class="{active:isActive(index)}" @click="add(index)"> </li>
        </ol>
        <!-- Wrapper for slides -->
        <div role="listbox" class="carousel-inner">
          <div>
            <img :src="imgSrc[imgIndex]" class="carousel carouselImage" width="100%">
          </div>
        </div>
      </div>
      <div class="carouselBackgroundDiv">
      </div>
    </div>

    <!--商品推荐-->
    <div class="homepageCategoryProducts">
      <div class="eachHomepageCategoryProducts">
        <div class="left-mark"></div>
        <span class="categoryTitle">太阳镜</span>
        <br>
        <div class="productItem">
          <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a>
          <a href="#nowhere" class="productItemDescLink">
            <span class="productItemDesc">[热销]
              好先生同款墨镜孙红雷偏光男士太阳镜韩明星
            </span>
          </a>
          <span class="productPrice">
            97.50
          </span>
        </div>
        <div class="productItem">
          <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9532.jpg"></a>
          <a href="#nowhere" class="productItemDescLink">
            <span class="productItemDesc">[热销]
              陌森太阳眼镜男女2016偏光定制驾驶近视
            </span>
          </a>
          <span class="productPrice">
            518.70
          </span>
        </div>
        <div class="productItem">
          <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9521.jpg"></a>
          <a href="#nowhere" class="productItemDescLink">
            <span class="productItemDesc">[热销]
              帕莎Prsr太阳镜女偏光镜潮范冰冰同款女
            </span>
          </a>
          <span class="productPrice">
            624.00
          </span>
        </div>
        <div class="productItem">
          <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9510.jpg"></a>
          <a href="#nowhere" class="productItemDescLink">
            <span class="productItemDesc">[热销]
              变色眼镜男女款半框太阳镜大框潮流防辐射防
            </span>
          </a>
          <span class="productPrice">
            170.00
          </span>
        </div>
        <div class="productItem">
          <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9499.jpg"></a>
          <a href="#nowhere" class="productItemDescLink">
            <span class="productItemDesc">[热销]
              新款男士偏光太阳镜日夜两用墨镜潮运动开车
            </span>
          </a>
          <span class="productPrice">
            551.00
          </span>
        </div>
        <div style="clear:both"></div>
      </div>
      <div class="eachHomepageCategoryProducts">
        <div class="left-mark"></div>
        <span class="categoryTitle">安全座椅</span>
        <br>
        <div class="productItem">
          <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10192.jpg"></a>
          <a href="#nowhere" class="productItemDescLink">
            <span class="productItemDesc">[热销]
              新生儿婴儿提篮式安全座椅汽车用车载儿童安
            </span>
          </a>
          <span class="productPrice">
            882.00
          </span>
        </div>
        <div class="productItem">
          <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10181.jpg"></a>
          <a href="#nowhere" class="productItemDescLink">
            <span class="productItemDesc">[热销]
              REEBABY汽车儿童安全座椅ISOFI
            </span>
          </a>
          <span class="productPrice">
            1,344.00
          </span>
        </div>
        <div class="productItem">
          <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10170.jpg"></a>
          <a href="#nowhere" class="productItemDescLink">
            <span class="productItemDesc">[热销]
              REEBABY儿童安全座椅9个月-12岁
            </span>
          </a>
          <span class="productPrice">
            1,216.00
          </span>
        </div>
        <div class="productItem">
          <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10159.jpg"></a>
          <a href="#nowhere" class="productItemDescLink">
            <span class="productItemDesc">[热销]
              好孩子汽车儿童安全座椅goodbaby9
            </span>
          </a>
          <span class="productPrice">
            1,199.40
          </span>
        </div>
        <div class="productItem">
          <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10148.jpg"></a>
          <a href="#nowhere" class="productItemDescLink">
            <span class="productItemDesc">[热销]
              惠尔顿儿童安全座椅isofix硬接口汽车
            </span>
          </a>
          <span class="productPrice">
            1,993.60
          </span>
        </div>
        <div style="clear:both"></div>
      </div>
      <img src="https://how2j.cn/tmall/img/site/end.png" class="endpng" id="endpng">
    </div>

  </div>


  <div id="page3">
    <iframe align="center" width="100%" height="590px" src="footer.html" frameborder="no" border="0" marginwidth="0"
      marginheight="0" scrolling="no"></iframe>
  </div>
  <script src="js/index.js"></script>
</body>